<template>

  <el-main>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">


      <el-form-item label="公寓名称" prop="homename">
        <el-input v-model="ruleForm.homename" style="width: 300px;"></el-input>
      </el-form-item>


      <el-form-item label="楼盘名称" prop="houseId">
        <el-select v-model="ruleForm.houseId" placeholder="请选择楼盘">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-button type="primary" @click="Submitlou">添加楼盘</el-button>
      </el-form-item>

      <el-form-item label="公共配套" prop="pubs">
        <el-checkbox-group v-model="pubs" @change="handleCheckedCitiesChange2">
          <el-checkbox v-for="city in hardwareListData2" :label="city.name" :key="city.id" :value="city.id"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="付款方式" prop="numberone">
        <el-select v-model="ruleForm.numberone" placeholder="请选择按月押金">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
        </el-select>
        ----
        <el-select v-model="ruleForm.numbertwo" placeholder="请选择按月租金">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="户型" prop="roomname">
        <el-select v-model="ruleForm.roomname" placeholder="请选择几室">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
        </el-select>
        ----
        <el-select v-model="ruleForm.roomnames" placeholder="请选择几室">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="公共区域图片" prop="desc">
        <el-upload
          class="upload-demo"
          action="http://localhost/dev-api/file/file/upload"
          :on-success="handleAvatarSuccess"
          :before-remove="beforeRemove"
          multiple
          list-type="picture-card"
          :limit="1"
          :on-exceed="handleExceed"
        ><img v-if="ruleForm.picture" :src="ruleForm.picture" class="avatar" >
        </el-upload>
      </el-form-item>






      <el-form-item label="装修情况" prop="decorate">
        <el-select v-model="ruleForm.decorate" placeholder="请选择装修情况">
          <el-option label="精装" value="1"></el-option>
          <el-option label="简装" value="2"></el-option>
          <el-option label="毛坯" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="设置管家" prop="userid">
        <el-select v-model="ruleForm.userid" placeholder="请选择管家">
          <el-option label="aaa" value="1"></el-option>
          <el-option label="admin" value="2"></el-option>
        </el-select>
      </el-form-item>



      <el-form-item label="房源介绍" prop="dstyle">
        <el-input type="textarea" v-model="ruleForm.dstyle"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

  </el-main>


</template>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  import {pubfacilitylist,prolist,savejizhong} from "@/api/system/fangyuan";
  export default {
    name: "index",
    data() {
      return {
        ruleForm: {
          s1:'',
          resource: '',
          desc: '',
        },
        pubs:[],
        options: [],
        hardwareListData2: [],
        checkAll: false,
        isIndeterminate: true,
        rules: {
          homename: [
            { required: true, message: '请输入公寓名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          houseId: [
            { required: true, message: '请选择楼盘区域', trigger: 'change' }
          ],

          numberone: [
            { required: true, message: '请选择付款方式', trigger: 'change' }
          ],
          roomname: [
            { required: true, message: '请选择户型区域', trigger: 'change' }
          ],
          decorate: [
            { required: true, message: '请选择装修情况', trigger: 'change' }
          ],
          userid: [
            { required: true, message: '请选择管家', trigger: 'change' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.s1=this.pubs.join(",");
            savejizhong(this.ruleForm).then(response => {
              console.log(response)
              alert('submit! 跳转房态图页面');
              this.$router.push('/fangyuan/fangtaitu/list');
            });
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      Submitlou(){
        this.$router.push('/loupan/addinfo');
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      handleAvatarSuccess(res, file) {
        alert(res.data.url)
        this.ruleForm.picture = res.data.url;
        console.log(this.ruleForm.picture)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //获取公共配置
      getpubfacilityList(){
        pubfacilitylist().then(response => {
          console.log(response)
          this.hardwareListData2 = response.data;
        });
      },
      handleCheckedCitiesChange2(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.hardwareListData2.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.hardwareListData2.length;
      },
      getloupan(){
        prolist().then(response => {
          console.log(response)
          this.options = response.data;
        });
      },
    },
    created() {
      this.getpubfacilityList();
      this.getloupan();
    }


  }
</script>

<style scoped>

</style>
